<template>
	<view style="width: 100%;">
		<view class="bg-white padding-tb-sm" v-if="select.show">
			<filter-shop :current="select.current" :list="select.list" v-on:select_change="select_change"></filter-shop>
		</view>
		<view v-for="(item,index) in activelist" :key="index" class="margin-top-sm flex-row" @click="getdetails(item.pkId)">
			<image src="https://api.anred.qrsk.net/applet/profile/image/index/active.png" style="width: 300rpx; height: 160rpx;" mode="aspectFill" class="border-radius">
			</image>
			<view class="margin-left-xs" style="width: 370rpx;">
				<view class="text-overhidden-1">{{item.name}}</view>
				<view class="text-sm margin-top-xs">活动日期：{{item.startDatetime}}</view>
				<view class="flex-row-bt margin-top-xs" style="">
					<view class="text-sm ">已报名/总人数：{{item.signedCount}}/{{item.maxCount}}</view>
					<view class="theme-bg-color text-white border-radius "
						style="padding: 0 15rpx; height: 48rpx; text-align: center;">
						<text v-if="current===0" class="" style="line-height: 48rpx; font-size: 11px;">已报名</text>
						<text v-if="current===1" class="" style="line-height: 48rpx; font-size: 11px;">待参加</text>
						<text v-if="current===2" class="" style="line-height: 48rpx; font-size: 11px;">已完成</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-row text-low text-sm"
			style=" margin: 50rpx auto 100rpx; justify-content: center;height: 40px;">
			<view style="" class="text-low">已经到底啦~</view>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
import { getactList } from '../../api/active/active';
	onLoad(() => {
		getlist()
	})
	const form = ref({
		current:1,
		status:-1,
		size:10
	})
	const current = ref(0)
	const activelist = ref([])
	const getlist = () =>{
		getactList({size:form.value.size,current:form.value.current,status:form.value.status}).then(res=>{
			console.log(res.data.data,'ajkfk')
			activelist.value = res.data.data
			console.log(activelist.value)
		})
	}
	const select = reactive({
		current: 0,
		show: true,
		list: [{
			name: '全部',
			isLifting: false //是否升降排序
		}, {
			name: '待参加',
			isLifting: false //是否升降排序
		}, {
			name: '已完成',
			isLifting: false //是否升降排序
		}]
	})
	const select_change = (e) => {
		console.log(e)
		if(e.name === '全部'){
			current.value = 0
			form.value.status = -1
			getlist()
		}else if(e.name === '待参加'){
			current.value = 1
			form.value.status = 0
			getlist()
		}else{
			current.value = 2
			form.value.status = 1
			getlist()
		}
	}
	const getdetails = (e) => {
		uni.navigateTo({
			url:"/pages/active/details?id="+ e +'&falg=1'
		})
	}
</script>

<style>
	page{
		background-color: #EFEFEF;
	}
</style>
